<template>
  <el-dialog  :close-on-click-modal="false"  v-model="dialogFormVisible" :title="title" width="640px">
    <el-form v-loading="formLoading" ref="formRef" :model="form" :rules="rules">
      <el-form-item label="重要端口名称" label-width="120" required prop="port_number">
        <el-input v-model="form.port_number" autocomplete="off" maxlength="60"   placeholder="请输入房间名称"/>
      </el-form-item>
      <el-form-item label="选择房间：" label-width="120" required prop="room_id">
        <el-select v-model="form.room_id" style="width: 100%;" placeholder="请选择房间">
          <el-option
              v-for="item in roomList"
              :key="item.room_id"
              :label="item.room_name"
              :value="item.room_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="检查类型" label-width="120" required prop="type">
        <el-radio-group v-model="form.type">
          <el-radio label="input">输入</el-radio>
          <el-radio label="chose">选择</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="dialog-footer" style="text-align: center">
        <el-button @click="handleClose" icon="remove">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="suLoading" icon="plus">{{ form.important_port_id?"更新":"保存"}}</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {SaveData,GetById,UpdateData} from '@/api/port.js'
import {list} from '@/api/room.js'
import KVA from '@/utils/kva.js'
import throttle from '@/utils/throttle.js'
const emits = defineEmits(["load"])
// 控制弹窗得显示
const dialogFormVisible = ref(false)
// 这个数据模型
let form = reactive({
  port_number:"",
  room_id:"",
  type:"",
  // room_name:"",
  // room_type:1,

})

// 弹出标题
const title = ref("添加重要端口")
const formLoading = ref(false)
const suLoading = ref(false)
// 表单ref, 用于提交最终得验证处理
const formRef = ref({})
// 表单验证谷子额
const rules = reactive({
  "port_number": [{required: true, message: '请输入重要端口名称', trigger: 'blur'}],
  "room_id": [{required: true, message: '请选择房间', trigger: 'change'}],
  "type": [{required: true, message: '请选择检查类型', trigger: 'change'}],
  // "room_type": [{required: true, message: '请选择房间类型', trigger: 'blur'}],

})
const roomList = ref([])
// 打开修改密码的弹窗
const handleOpen = async (opid) => {
  const res = await list()
  roomList.value = res.data
  // 每次打开头重置
  dialogFormVisible.value = true;
  if(opid){
    title.value = "修改重要端口"
    formLoading.value =  true;
    const resp = await GetById(opid)
    formLoading.value = false;
    // 这里地方要注意，一定要用reactive进行包裹处理
    // form = reactive(resp.data)
    form.important_port_id = resp.data.important_port_id
    form.room_id = resp.data.room_id || undefined
    form.port_number = resp.data.port_number
    form.type = resp.data.type
    title.value = "你正在修改的添加基础检查项ID是【" + form.important_port_id + "】"
  }else{
    title.value = "添加添加基础检查项"
    formRef.value.resetFields && formRef.value.resetFields()
    form.important_port_id = undefined
  }
}

// 保存用户
const handleSubmit = () => {
  throttle(()=>{
    formRef.value.validate(async (valid, fields) => {
      if (valid) {
        suLoading.value = true
        try{
          if(form.important_port_id){
            delete form.createdAt
            delete form.updatedAt
            await UpdateData(form)
          }else{
            await SaveData(form)
          }
          suLoading.value = false
          // 提示保存成功
          KVA.notifySuccess(form.important_port_id?"更新成功":"保存成功")
          // 关闭弹窗
          handleClose()
          // 刷新方法
          emits("load")
        }catch(ex){
          suLoading.value = false
        }
      }else{
        suLoading.value = false
      }
    })
  },1000)
}

const handleClose = ()=>{
  delete form.important_port_id
  formRef.value.resetFields()
  dialogFormVisible.value = false
}


// 把弹出打开得方法暴露给父组件进行调用
defineExpose({
  handleOpen
})
</script>
